<template>
    <div style="height: 360px;">
        <span>
            <span style="font-size:30px;color: rgb(102,102,102);margin-bottom: 5px;">数据统计</span>
        </span>
        <el-row>
            <div class="right">
                <div class="title">
                    当前文章
                </div>
                <div class="num">
                    {{ articleNum ? articleNum : 0 }}
                </div>
            </div>
            <div class="left">
                <div class="title">
                    今日更新
                </div>
                <div class="num">
                    {{ nowDay ? nowDay : 0 }}
                </div>
            </div>
            <div class="right">
                <div class="title">
                    管理人员
                </div>
                <div class="num">
                    {{ adminSum ? adminSum : 0 }}
                </div>
            </div>
            <div class="left">
                <div class="title">
                    红色景点
                </div>
                <div class="num">
                    {{ scenery ? scenery : 0 }}
                </div>
            </div>
            <div class="right">
                <div class="title">
                    人物故事
                </div>
                <div class="num">
                    {{ story ? story : 0 }}
                </div>
            </div>
            <div class="left">
                <div class="title">
                    精彩活动
                </div>
                <div class="num">
                    {{ activity ? activity : 0 }}
                </div>
            </div>
        </el-row>
    </div>
</template>

<script>
import $ from 'jquery';
import { ref } from 'vue';
export default {
    name: "dateComponents",


    setup() {
        let articleNum = ref();
        let nowDay = ref();
        let adminSum = ref();
        let scenery = ref();
        let story = ref();
        let activity = ref();

        $.ajax({
            type: "post",
            url: "http://124.221.73.180:3001/data/getArticleSum/",

            success(resp) {
                articleNum.value = resp;
            }
        })
        $.ajax({
            type: "post",
            url: "http://124.221.73.180:3001/data/getNowDaySum/",

            success(resp) {
                nowDay.value = resp;
            }
        })
        $.ajax({
            type: "post",
            url: "http://124.221.73.180:3001/data/getAdminSum/",

            success(resp) {
                adminSum.value = resp;
            }
        })
        $.ajax({
            type: "post",
            url: "http://124.221.73.180:3001/data/getScenerySum/",

            success(resp) {
                scenery.value = resp;
            }
        })
        $.ajax({
            type: "post",
            url: "http://124.221.73.180:3001/data/getStorySum/",

            success(resp) {
                story.value = resp;
            }
        })
        $.ajax({
            type: "post",
            url: "http://124.221.73.180:3001/data/getActivitySum/",

            success(resp) {
                activity.value = resp;
            }
        })

        return {
            articleNum,
            nowDay,
            adminSum,
            scenery,
            story,
            activity,
        }
    }
}

</script>

<style scoped>
.right {
    width: 110px;
    height: 100px;
    background-color: rgb(247, 248, 250);
    margin-right: 20px;
    margin-bottom: 10px;
    cursor: default;
}

.left {
    width: 110px;
    height: 100px;
    background-color: rgb(247, 248, 250);
    margin-bottom: 10px;
    cursor: default;
}

.right:hover {
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 1);

}

.left:hover {
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 1);

}

.title {
    width: 100%;
    font-size: 27px;
    margin-top: 13px;
    font-family: STKaiti;
    text-align: center;
}

.num {
    width: 100%;
    font-size: 25px;
    margin-top: 13px;
    font-family: STKaiti;
    text-align: center;
}
</style>